<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>d3 study</title>
  </head>
  <body>
    <section id="root">
      <p><a>a</a><b>11</b><b>12</b></p>
      <p><a>b</a><b>21</b><b>22</b></p>
      <div id="Ford"></div>
      <div id="Jarrah"></div>
      <div id="Kwon"></div>
      <div id="Locke"></div>
      <div id="Reyes"></div>
      <div id="Shephard"></div>
      <div id="ccc"></div>
      <main id="main-container" style="background-color: red">
        <div></div>
        <div></div>
        <div></div>
      </main>
      <div id="table-container"></div>
      <div id="enter-container" style="background-color: red"></div>
    </section>
  </body>
  <script type="module">
    import * as d3 from 'https://cdn.jsdelivr.net/npm/d3@7/+esm'

    /**
     * The key function is then also evaluated for each new datum in data,
     * being passed the current datum (d), the current index (i),
     * and the group’s new data, with this as the group’s parent DOM element;
     *
     * selection.select propagates the parent’s data to the selected child.
     * d3.select(selector) 返回selection
     * d3.selectAll(selector) 返回selection数组
     */
    const b = d3.selectAll('p').select('b') // the first <b> in every <p>
    console.log(b)

    const empty = d3.selectAll('p').select(null)
    console.log(empty)

    const previous = d3
      .selectAll('p')
      .datum([1, 2])
      .select(function (d, index) {
        console.log(d)

        return this.previousElementSibling // this 指向 p
      })
    console.log(previous)

    // selection.selectedAll
    const selectedAll = d3.selectAll('p').selectAll('b')
    console.log(selectedAll)

    /* joining data */
    const matrix = [
      [11975, 5871, 8916, 2868],
      [1951, 10048, 2060, 6171],
      [8010, 16145, 8090, 8045],
      [1013, 990, 940, 6907],
    ]

    d3.select('#table-container')
      .append('table')
      .selectAll('tr')
      .data(matrix)
      .join('tr')
      .selectAll('td')
      .data((d) => d)
      .join('td')
      .text((d) => d)

    const data = [
      { name: 'Locke', number: 4 },
      { name: 'Reyes', number: 8 },
      { name: 'Ford', number: 15 },
      { name: 'Jarrah', number: 16 },
      { name: 'Shephard', number: 23 },
      { name: 'Kwon', number: 42 },
    ]
    // setTimeout(() => {
    //   data.push({ name: 'ccc', number: 3232 })
    // }, 200)

    d3.select('#ccc')
      .data([1, 2, 3])
      .text((d) => d)

    d3.selectAll('div')
      .data(data, function (d) {
        return d ? d.name : this.id
      })
      .text((d) => d.number)

    d3.select('#main-container')
      .selectAll('div')
      .data([1, 2, 3])
      .text(function (d, index, pnode) {
        console.log(d, index, pnode)
        return index
      })
    function randomLetters() {
      return d3
        .shuffle('abcdefghijklmnopqrstuvwxyz'.split(''))
        .slice(0, Math.floor(6 + Math.random() * 20))
        .sort()
    }
    /**
     * join data 元素本身不存在时
     *  enter => enter.append("circle"),
        update => update,
        exit => exit.remove()
     */
    function test() {
      const svg = d3
        .create('svg')
        .attr('width', 200)
        .attr('height', 33)
        .attr('viewBox', `0 -20 200 33`)

      svg
        .selectAll('text')
        .data(randomLetters())
        .join((enter) => enter.append('text'))
        .attr('x', (d, i) => i * 16)
        .text((d) => d)

      return svg.node()
    }
    const svg = test()
    document.querySelector('#table-container').append(svg)
    console.log(svg)

    let div = d3
      .select('#enter-container')
      .selectAll('div')
      .data([4, 8, 15, 16, 23, 42])
      .enter()
      .append('div')
      .text((d) => d)

    div = div.data([1, 2, 4, 8, 16, 32], (d) => d)

    div
      .enter()
      .append('div')
      .text((d) => d)

    div.exit().remove()

    // selection.datum
  </script>
</html>
